<script setup>
import {ref, reactive} from "vue";
import {register} from '@/api/login';
import {useI18n} from 'vue-i18n';
import {ElMessage} from 'element-plus'; // 确保 ElMessage 引入

const {t} = useI18n();

const registerRef = ref(null);
const registerForm = reactive({
  password: "",
  email: "",
  var_password: "",
  phone: "",
  username: ""
});

const registerRules = reactive({
  email: [
    {required: true, message: t('valid.emailNotNull'), trigger: 'blur'},
    {type: 'email', message: t('valid.invalidEmail'), trigger: 'blur'}, // 邮箱格式校验
  ],
  password: [
    {required: true, message: t('valid.passwordNotNull'), trigger: 'blur'},
    {min: 6, message: t('valid.minPassLength'), trigger: 'blur'},
  ],
  var_password: [
    {required: true, message: t('valid.varPasswordNotNull'), trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error(t('valid.passwordMismatch')));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    },
    {max: 50, message: t('valid.maxLength')}
  ],
  phone: [
    {required: true, message: t('valid.phoneNotNull'), trigger: 'blur'},
    {
      pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      message: t('valid.invalidPhone'),
      trigger: 'blur'
    }
  ],
  username: [
    {required: true, message: t('valid.userNameNotNull'), trigger: 'blur'},
    {max: 50, message: t('valid.maxLength')}
  ]
});

// 注册
const toRegister = () => {
  registerRef.value.validate(valid => {
    if (valid) {
      const formData = new FormData();
      Object.keys(registerForm).forEach(key => {
        formData.append(key, registerForm[key]);
      });

      register(formData).then(res => {
        if (res.code === 0) {
          ElMessage.success(t('message.registerSuccess'));
        } else {
          let msg = res.msg ? res.msg : '';
          msg += msg === "" ? (res.code ? `code:${res.code}` : t('message.registerFail')) : "";
          ElMessage.error(msg);
        }
      }).catch(err => {
        console.log('err', err);
        ElMessage.error(t('message.registerFail'));
      });
    } else {
      ElMessage.error(t('message.mustInput'));
    }
  });
};
</script>

<template>
  <div class="content">
    <el-form ref="registerRef" :model="registerForm" :rules="registerRules"
             class="px-5 py-12 rounded-lg shadow w-3/4 md:w-1/3 from">
      <div class="text-xl from_title">{{ $t('menu.accountRegister') }}</div>

      <el-form-item class="input mt-6" prop="username">
        <el-input show-word-limit v-model="registerForm.username" maxlength="30" style="width:100%"
                  :placeholder="$t('valid.inputUserName')"/>
      </el-form-item>

      <el-form-item class="input mt-6" prop="email">
        <el-input show-word-limit v-model="registerForm.email" maxlength="30" style="width:100%"
                  :placeholder="$t('valid.inputEmail')"/>
      </el-form-item>

      <el-form-item class="input mt-6" prop="password">
        <el-input v-model="registerForm.password" maxlength="30" style="width:100%" type="password"
                  :placeholder="$t('valid.inputPass')" show-password/>
      </el-form-item>

      <el-form-item class="input mt-6" prop="var_password">
        <el-input v-model="registerForm.var_password" maxlength="30" style="width:100%" type="password"
                  :placeholder="$t('valid.inputAgainPass')" show-password/>
      </el-form-item>

      <el-form-item class="input mt-6" prop="phone">
        <el-input v-model="registerForm.phone" maxlength="11" type="number" style="width:100%"
                  :placeholder="$t('valid.inputPhone')"/>
      </el-form-item>

      <div class="input mt-8">
        <el-button @click="toRegister" type="warning" style="width: 100%;" round>{{ $t('menu.register') }}</el-button>
      </div>
    </el-form>
  </div>
</template>

<style scoped>
.input {
  width: 100%;
}

.from {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content {
  width: 100%;
  background-image: url("../../assets/img/back.png");
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.8);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-login-btn {
  cursor: pointer;
}

.header-login-btn:hover {
  background-color: rgba(45, 84, 235, 0.1);
}

.header-login-btn-active {
  color: #2d54eb;
  font-weight: 500;
  border-bottom: solid 2px #2d54eb;
}
</style>
